import React from 'react';
import axios from 'axios'
import { useEffect, useState } from 'react';
//函数组件特点:
// 当函数组件中的状态发生变化的时候, 函数组件会重新执行

//语法1: 如果需要操作dom,那么最好写在useEffect 执行时间是等dom 更新完毕执行
// 当不操作dom, 例如获取更新后的state 数据, 可以不使用useEffect

// 语法2: 如果涉及到例如事件绑定,return 需要进行事件的清除处理, 否则绑定多次

const Fatherdemo = () => {
    const [count, setCountFn] = useState(0)
    const [schoollist, setSchoolListFn] = useState([])

    // 语法1: 场景
    // useEffect(() => {
    //     console.log('count', count);
    // })
    // console.log('count', count);


    // 语法2:场景
    const handleClickFn = () => {
        console.log('点击事件');
    }
    // useEffect(() => {
    //     // console.log(document.querySelector('#box'))
    //     document.querySelector('#box').addEventListener('click', handleClickFn)
    //     return () => {
    //         // 清除一下事件绑定
    //         document.querySelector('#box').removeEventListener('click', handleClickFn)
    //     }
    // })
    // useEffect(() => {
    //     // console.log(document.querySelector('#box'))
    //     document.querySelector('#box').onclick = handleClickFn
    // })

    // 语法3:
    // useEffect(() => {
    //     // console.log(document.querySelector('#box'))
    //     document.querySelector('#box').addEventListener('click', handleClickFn)
    //     // 一般进行数据请求
    //     axios.get('https://api.i-lynn.cn/college').then(res => {
    //         setSchoolListFn(res.data.data.list1)
    //     })
    // }, [])

    // 
    //console.log('count', count);
    return (
        <div id='box'>
            <p onClick={() => {
                setCountFn(count + 1)
            }}>count:{count}</p>

            {/* 渲染学校列表数据 */}
            <ul>
                {
                    schoollist.map(item => <li key={item.id}>{item.school_name}</li>)
                }
            </ul>

        </div>
    );
}

export default Fatherdemo;
